<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue' // Assuming this component exists
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

// --- Refs for Sections ---
const mainContainerRef = ref(null)
const introSectionRef = ref(null)
const dehazingSectionRef = ref(null)
const fusionSectionRef = ref(null)
const detectionSectionRef = ref(null)
const sections = ref([])

// --- Navigation ---
const router = useRouter()
const toLogin = () => {
  router.push('/login') // Adjust if your login route is different
}
const toGitee = () => {
  window.open('https://gitee.com/mindwell/bank-management') // Replace with your actual contact/repo link
}

// --- Side Navigation State ---
const currentSectionIndex = ref(0)

// --- Modal State ---
const isModalVisible = ref(false)
const modalImageSrc = ref('') // We'll use the same placeholder for now

const openModal = () => {
  // In a real scenario, you'd pass the specific detailed image src
  modalImageSrc.value = '/src/assets/svg/模型算法.svg' // Placeholder for detailed view
  isModalVisible.value = true
}

const closeModal = () => {
  isModalVisible.value = false
  modalImageSrc.value = ''
}

// --- Scrolling Logic ---
const scrollToSection = (index) => {
  if (sections.value[index]) {
    sections.value[index].scrollIntoView({ behavior: 'smooth' })
  }
}

// --- Intersection Observer for Scrollspy ---
let observer = null

const observerCallback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Find the index of the intersecting section
      const index = sections.value.findIndex((sec) => sec === entry.target)
      if (index !== -1) {
        currentSectionIndex.value = index
      }
    }
  })
}

onMounted(() => {
  // Assign refs to sections array
  sections.value = [
    introSectionRef.value,
    dehazingSectionRef.value,
    fusionSectionRef.value,
    detectionSectionRef.value
  ].filter((el) => el) // Filter out nulls just in case

  if (mainContainerRef.value && sections.value.length > 0) {
    observer = new IntersectionObserver(observerCallback, {
      root: null, // observes intersections relative to the viewport
      threshold: 0.6 // Trigger when 60% of the section is visible
    })

    sections.value.forEach((section) => observer.observe(section))
  }
  // Ensure initial state is correct if observer doesn't fire immediately
  if (window.scrollY === 0) {
    currentSectionIndex.value = 0
  }
})

onUnmounted(() => {
  if (observer) {
    sections.value.forEach((section) => {
      if (section) observer.unobserve(section)
    })
    observer.disconnect()
  }
})
</script>

<template>
  <div class="scroll-container" ref="mainContainerRef">
    <header class="header">
      <h1 class="title">
        火域智眼——基于双模态感知的浓烟环境下人体目标实时检测系统
      </h1>
      <button-login
        @click="toLogin"
        text="登录/注册 →"
        extraClass="login-btn header-login-btn"
      ></button-login>
    </header>

    <nav class="side-nav">
      <ul>
        <li
          v-for="(section, index) in ['Intro', 'Dehaze', 'Fusion', 'Detect']"
          :key="index"
          :class="{ active: currentSectionIndex === index }"
          @click="scrollToSection(index)"
        >
          <span class="dot"></span>
          <span class="tooltip">{{ section }}</span>
        </li>
      </ul>
    </nav>

    <main class="content">
      <section class="section section--intro" ref="introSectionRef">
        <div class="system-intro">
          <div class="left">
            <h1>
              基于<span>双模态感知</span>的<br />浓烟环境下<span>人体目标实时检测</span>系统
            </h1>
            <p style="font-size: 2.3rem; line-height: 1.5">
              “火域智眼”系统通过双模态感知技术与微服务架构，为消防指挥中心工作人员提供高效的指挥与协作工具，提升火灾应急响应能力。
            </p>
            <div class="btn-wrapper">
              <button-login
                @click="toLogin"
                text="立即体验"
                extraClass="btn-use btn-intro"
              ></button-login>
              <button-login
                @click="toGitee"
                text="联系我们"
                extraClass="btn-contact btn-intro"
              ></button-login>
            </div>
          </div>
          <figure class="right">
            <img src="@/assets/svg/金融.svg" alt="系统介绍插图" class="img" />
          </figure>
        </div>
      </section>

      <section class="section section--dehazing" ref="dehazingSectionRef">
        <div class="section-content layout-variant-1">
          <div class="text-content">
            <h2 class="section-title">智能去烟模块</h2>
            <p>
              利用先进深度学习模型，有效去除红外图像中的烟雾干扰，还原清晰视野。
            </p>
            <div
              class="model-abstract"
              @mouseover="openModal"
              @mouseleave="closeModal"
              @click="openModal"
            >
              <img src="/src/assets/svg/模型算法.svg" alt="去烟模型抽象图" />
              <span>悬停查看模型详情</span>
            </div>
          </div>
          <div class="visual-content image-comparison">
            <figure>
              <img src="/src/assets/svg/模型算法.svg" alt="原始红外图像" />
              <figcaption>原始红外图像</figcaption>
            </figure>
            <span class="arrow">&rarr;</span>
            <figure>
              <img src="/src/assets/svg/模型算法.svg" alt="去烟后图像" />
              <figcaption>去烟后图像</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section class="section section--fusion" ref="fusionSectionRef">
        <div class="section-content layout-variant-2">
          <div class="text-content">
            <h2 class="section-title">对齐与双模态融合模块</h2>
            <p>
              精确对齐热成像与红外图像，融合两者优势信息，生成信息更丰富的图像。
            </p>
            <div
              class="model-abstract"
              @mouseover="openModal"
              @mouseleave="closeModal"
              @click="openModal"
            >
              <img src="/src/assets/svg/模型算法.svg" alt="融合模型抽象图" />
              <span>悬停查看模型详情</span>
            </div>
          </div>
          <div class="visual-content image-fusion">
            <figure class="fusion-item">
              <img src="/src/assets/svg/模型算法.svg" alt="红外图像" />
              <figcaption>红外图像</figcaption>
            </figure>
            <figure class="fusion-item">
              <img src="/src/assets/svg/模型算法.svg" alt="热成像图像" />
              <figcaption>热成像图像</figcaption>
            </figure>
            <figure class="fusion-item fusion-result">
              <img src="/src/assets/svg/模型算法.svg" alt="融合后图像" />
              <figcaption>融合后图像</figcaption>
            </figure>
          </div>
        </div>
      </section>

      <section class="section section--detection" ref="detectionSectionRef">
        <div class="section-content layout-variant-3">
          <div class="text-content">
            <h2 class="section-title">YOLOv12 人体检测模块</h2>
            <p>
              基于改进的YOLOv12算法，在融合后的图像上实现快速精准的人体目标检测。
            </p>
            <div
              class="model-abstract"
              @mouseover="openModal"
              @mouseleave="closeModal"
              @click="openModal"
            >
              <img src="/src/assets/svg/模型算法.svg" alt="检测模型抽象图" />
              <span>悬停查看模型详情</span>
            </div>
          </div>
          <div class="visual-content image-detection">
            <figure>
              <img
                src="/src/assets/svg/模型算法.svg"
                alt="人体检测结果示意图"
              />
              <figcaption>检测结果示意图</figcaption>
            </figure>
          </div>
        </div>
      </section>
    </main>

    <div v-if="isModalVisible" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <button class="modal-close" @click="closeModal">&times;</button>
        <img :src="modalImageSrc" alt="模型详细结构图" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// --- Import Variables and Mixins if they exist ---
// Example: Assuming you have these files
// @import '@/assets/scss/abstracts/_variables.scss';
// @import '@/assets/scss/abstracts/_mixins.scss';
// @import '@/assets/scss/base/_animation.scss';

// --- Define some base variables if not imported ---
$color-primary: #4caf50; // Example Green
$color-primary-dark: #388e3c;
$color-secondary: #ff9800; // Example Orange
$color-white: #fff;
$color-black: #000;
$color-grey-light-1: #f8f9fa;
$color-grey-light-2: #e9ecef;
$color-grey-dark-1: #555;
$color-grey-dark-2: #777;
$color-dark: #333;
$header-height: 8rem;
$nav-width: 5rem; // Width for the side nav area
$base-font-size: 1.6rem; // Assuming base HTML font-size is 62.5% (10px)

// --- Base Styles ---
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; // 1rem = 10px
  box-sizing: border-box;
  scroll-behavior: smooth; // Enable smooth scrolling for the whole page
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: $color-grey-dark-1;
  background-color: $color-grey-light-1; // Consistent background
}

.scroll-container {
  position: relative;
}

// --- Header Styling (Existing + Adjustments) ---
.header {
  background-color: $color-white;
  height: $header-height;
  width: 100%;
  box-shadow: 0 0.5rem 1.5rem rgba($color-black, 0.08);
  color: $color-dark;
  position: fixed;
  top: 0;
  left: 0; // Ensure it starts from the left edge
  padding: 0 4rem; // Increased padding slightly
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100; // Ensure header is above content

  .title {
    font-size: 2.6rem; // Slightly smaller title for better fit
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .header-login-btn {
    // Use a specific class to avoid conflicts
    padding: 1.2rem 2.5rem;
    width: auto; // Auto width based on text
    font-size: $base-font-size;
    border-radius: 5px;
    // Assuming ButtonLogin has its own base styles, add specifics here if needed
  }
}

// --- Main Content Area ---
.content {
  padding-top: $header-height; // Prevent content from going under fixed header
  // No explicit height/overflow needed here for native scrolling
}

// --- Section Base Styling ---
.section {
  min-height: 100vh; // Each section takes at least the full viewport height
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem $nav-width 6rem 6rem; // Top padding to clear header if needed, Right for nav, Bottom, Left
  position: relative; // For potential pseudo-elements or absolute children
  border-bottom: 1px solid $color-grey-light-2; // Subtle separator

  &:last-child {
    border-bottom: none;
  }

  // Alternating Backgrounds for visual separation (optional)
  &:nth-child(odd) {
    background-color: $color-white;
  }
  &:nth-child(even) {
    background-color: $color-grey-light-1;
  }

  // Animate sections fading in slightly on scroll (requires JS observer or scroll listener to add a class)
  // Example: .section.is-visible { opacity: 1; transform: translateY(0); }
  opacity: 1; // Start visible for simplicity, add animation if desired
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  // transform: translateY(30px); // Start slightly lower
}

// --- Section 1: Intro Styling (Adapted from original) ---
.section--intro {
  padding-top: 0; // Intro section starts right below header effectively
  padding-bottom: 4rem; // Less bottom padding might be needed
  background-color: $color-grey-light-1; // Match original

  .system-intro {
    display: grid;
    grid-template-columns: 1fr 1fr; // Keep 50/50 split
    align-items: center;
    gap: 6rem;
    width: 100%;
    max-width: 140rem; // Limit max width for large screens
    margin: 0 auto; // Center the content grid

    .left {
      justify-self: end; // Align left content block to the right of its column
      width: 90%; // Control width of the text block
      h1 {
        font-size: 4rem; // Adjust as needed
        line-height: 1.3;
        margin-bottom: 2.5rem;
        color: $color-dark;
        font-weight: 700;
        span {
          color: $color-primary;
        } // Highlight color
      }
      p {
        font-size: 2rem; // Slightly smaller than original
        line-height: 1.6;
        margin-bottom: 4rem;
        color: $color-grey-dark-1;
      }
      .btn-wrapper {
        display: flex;
        gap: 2rem;
        .btn-intro {
          // Style buttons if ButtonLogin doesn't cover it
          padding: 1.5rem 3rem;
          font-size: $base-font-size;
          font-weight: 500;
          border-radius: 50px; // Pill shape
          transition: all 0.3s ease;
          cursor: pointer;
          border: none;
          position: relative; // For potential icons
          // Add specific use/contact styles if needed (like icons from original)
          &.btn-use {
            background-color: $color-primary;
            color: $color-white;
          }
          &.btn-contact {
            background-color: $color-secondary;
            color: $color-white;
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 1rem 2rem rgba($color-black, 0.15);
          }
          &:active {
            transform: translateY(-1px);
            box-shadow: 0 0.5rem 1rem rgba($color-black, 0.1);
          }
        }
      }
    } // end .left

    .right {
      justify-self: start; // Align right content block (image) to the left of its column
      .img {
        width: 90%;
        max-width: 50rem; // Max size for the image
        height: auto;
        object-fit: contain; // Use contain to avoid distortion
      }
    } // end .right
  } // end .system-intro
}

// --- General Content Styling for New Sections ---
.section-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr; // Left side smaller than right side
  gap: 8rem; // Generous gap
  align-items: center;
  width: 100%;
  max-width: 130rem; // Consistent max width
  margin: 0 auto;

  .text-content {
    text-align: left;
    .section-title {
      font-size: 3.5rem;
      font-weight: 600;
      color: $color-primary-dark;
      margin-bottom: 2rem;
      position: relative;
      padding-bottom: 1rem;

      // Underline effect
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 5rem;
        height: 4px;
        background-color: $color-secondary;
        border-radius: 2px;
      }
    }
    p {
      font-size: $base-font-size;
      color: $color-grey-dark-1;
      margin-bottom: 3rem;
    }
  }

  .visual-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  figure {
    text-align: center;
    img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 0.5rem 1.5rem rgba($color-black, 0.1);
      margin-bottom: 1rem;
      background-color: $color-grey-light-2; // BG for transparent SVGs
      padding: 1rem; // Padding around image if needed
      border: 1px solid $color-grey-light-2;
    }
    figcaption {
      font-size: 1.4rem;
      color: $color-grey-dark-2;
      font-style: italic;
    }
  }

  // --- Model Abstract ---
  .model-abstract {
    margin-top: 4rem;
    cursor: pointer;
    display: inline-block; // To fit content
    text-align: center;
    transition: transform 0.3s ease;

    img {
      width: 10rem; // Adjust size as needed
      height: 10rem;
      object-fit: contain;
      border: 2px solid $color-grey-light-2;
      border-radius: 50%; // Circular abstract
      padding: 1rem;
      background-color: $color-white;
      box-shadow: 0 2px 5px rgba($color-black, 0.05);
      transition: all 0.3s ease;
    }
    span {
      display: block;
      font-size: 1.3rem;
      color: $color-grey-dark-2;
      margin-top: 0.5rem;
      opacity: 0; // Hidden by default
      transition: opacity 0.3s ease;
    }

    &:hover {
      transform: scale(1.05);
      img {
        box-shadow: 0 5px 15px rgba($color-primary, 0.2);
        border-color: $color-primary;
      }
      span {
        opacity: 1; // Show text on hover
      }
    }
  }
}

// --- Layout Variations for New Sections ---

// Layout Variant 1 (Dehazing - Side by Side Comparison)
.layout-variant-1 {
  .visual-content.image-comparison {
    figure {
      flex: 1; // Each figure takes equal space
      max-width: 45%; // Limit width to prevent huge images
    }
    .arrow {
      font-size: 4rem;
      color: $color-secondary;
      font-weight: bold;
      flex-shrink: 0; // Prevent arrow from shrinking
    }
  }
}

// Layout Variant 2 (Fusion - 2 small + 1 large result)
.layout-variant-2 {
  // Swap columns order
  grid-template-columns: 1.5fr 1fr; // Images left, text right
  .text-content {
    order: 2;
  } // Move text to the right
  .visual-content {
    order: 1;
  } // Move visuals to the left

  .visual-content.image-fusion {
    display: grid;
    grid-template-columns: 1fr 1fr; // Two columns
    grid-template-rows: auto auto;
    gap: 2rem;
    align-items: end; // Align items to bottom for visual interest

    .fusion-item {
      width: 100%;
      img {
        height: 18rem;
        object-fit: cover;
      } // Fixed height for inputs

      &.fusion-result {
        grid-column: 1 / -1; // Span both columns
        margin-top: 1rem; // Space above result
        img {
          height: 25rem;
          object-fit: cover;
        } // Larger result image
      }
    }
  }

  .model-abstract {
    margin-left: auto;
    margin-right: auto;
    display: block;
  } // Center if needed
}

// Layout Variant 3 (Detection - Single Large Image)
.layout-variant-3 {
  align-items: start; // Align content top
  gap: 5rem;
  grid-template-columns: 0.8fr 1.2fr; // Different ratio

  .text-content {
    padding-top: 2rem;
  } // Align text slightly lower

  .visual-content.image-detection {
    justify-content: center; // Center the single figure
    figure {
      max-width: 80%; // Allow image to be quite large
      img {
        // Let image size naturally based on container, add max-height if needed
        max-height: 50vh;
        object-fit: contain;
      }
    }
  }

  .model-abstract {
    margin-top: 6rem;
  } // More space before model abstract
}

// --- Side Navigation Styling ---
.side-nav {
  position: fixed;
  top: 50%;
  right: 2rem; // Position from right edge
  transform: translateY(-50%);
  z-index: 50; // Above content, below header/modal

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.8rem; // Space between dots

    li {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center; // Center the dot

      .dot {
        width: 12px;
        height: 12px;
        background-color: rgba($color-grey-dark-2, 0.5);
        border-radius: 50%;
        transition: all 0.3s ease;
        border: 2px solid transparent;
      }

      .tooltip {
        position: absolute;
        top: 50%;
        right: 100%; // Position to the left of the dot
        transform: translateY(-50%) translateX(-10px); // Adjust position
        background-color: $color-dark;
        color: $color-white;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        font-size: 1.2rem;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
        pointer-events: none; // Prevent tooltip from blocking clicks
      }

      &:hover .dot {
        background-color: $color-primary;
      }

      &:hover .tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(-15px); // Move further left on hover
      }

      // Active state
      &.active .dot {
        background-color: $color-white; // Inner color
        border-color: $color-primary; // Border color
        transform: scale(1.2); // Slightly larger
        box-shadow: 0 0 0 3px rgba($color-primary, 0.3);
      }
    }
  }
}

// --- Modal Styling ---
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color-black, 0.7); // Dark semi-transparent background
  backdrop-filter: blur(8px); // Background blur effect
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; // Highest z-index
  opacity: 0;
  visibility: hidden;
  animation: fadeIn 0.3s forwards;
}

.modal-content {
  background-color: $color-white;
  padding: 3rem;
  border-radius: 10px;
  max-width: 80vw; // Max width relative to viewport
  max-height: 85vh; // Max height relative to viewport
  overflow: auto; // Allow scrolling if content overflows
  position: relative;
  box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
  transform: scale(0.9);
  animation: scaleUp 0.3s 0.1s forwards;

  img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh; // Limit image height inside modal
    object-fit: contain;
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 3rem;
  color: $color-grey-dark-2;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;

  &:hover {
    color: $color-dark;
  }
}

// --- Animations ---
@keyframes fadeIn {
  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes scaleUp {
  to {
    transform: scale(1);
  }
}

// --- Add Original Animations if needed ---
// @keyframes toBottom { ... }
// @keyframes toTop { ... }
// @keyframes toLeft { ... }
// @keyframes toRight { ... }
// @keyframes toRightTop { ... }

// --- Responsiveness (Basic Example) ---
@media (max-width: 992px) {
  // Tablet breakpoint
  html {
    font-size: 56.25%;
  } // Adjust base font size (9px)
  .header {
    padding: 0 2rem;
  }
  .section {
    padding: 6rem $nav-width 4rem 3rem;
  }
  .section-content {
    grid-template-columns: 1fr; // Stack columns
    gap: 4rem;
    text-align: center; // Center text when stacked

    .text-content {
      order: 1;
      text-align: center;
    } // Text first
    .visual-content {
      order: 2;
    } // Visuals second

    .text-content .section-title::after {
      left: 50%;
      transform: translateX(-50%);
    } // Center underline
    .model-abstract {
      margin: 3rem auto;
      display: block;
    }
  }

  // Adjust specific layouts for stacked view
  .layout-variant-2 {
    grid-template-columns: 1fr; // Override grid for stacking
    .text-content {
      order: 1;
    }
    .visual-content {
      order: 2;
    }
    .visual-content.image-fusion {
      grid-template-columns: 1fr 1fr;
    } // Keep inputs side-by-side if space allows
  }
  .layout-variant-3 {
    grid-template-columns: 1fr;
    .visual-content.image-detection figure {
      max-width: 90%;
    }
  }

  .side-nav {
    right: 1rem;
  } // Move nav closer to edge
  .side-nav ul li .tooltip {
    display: none;
  } // Hide tooltips on smaller screens
}

@media (max-width: 768px) {
  // Mobile breakpoint
  html {
    font-size: 50%;
  } // Adjust base font size (8px)
  .header .title {
    font-size: 2.2rem;
  }
  .header .header-login-btn {
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
  }
  .section--intro .system-intro {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .section--intro .system-intro .left {
    justify-self: center;
    width: 100%;
    order: 2;
  }
  .section--intro .system-intro .right {
    justify-self: center;
    order: 1;
    .img {
      width: 70%;
      max-width: 30rem;
    }
  }
  .section--intro .system-intro .left .btn-wrapper {
    justify-content: center;
  }

  .layout-variant-1 .visual-content.image-comparison {
    flex-direction: column;
    .arrow {
      transform: rotate(90deg);
      margin: 1rem 0;
    }
    figure {
      max-width: 80%;
    }
  }
  .layout-variant-2 .visual-content.image-fusion {
    grid-template-columns: 1fr;
    img {
      height: auto;
      max-height: 20rem;
    }
    .fusion-result img {
      max-height: 25rem;
    }
  }

  .side-nav {
    display: none;
  } // Optionally hide side nav on very small screens
  .modal-content {
    max-width: 90vw;
    padding: 2rem;
  }
}
</style>
